/*
 * @Title: 美食 筛选
 * @Created by: ycq
 */
<template>
	<view class="screen-bg"  @touchmove.stop.prevent="moveHandle">
		<view class="screen-body" >
			<view class="price">
				<text class="price-label">价格区间（元）</text>
				<view class="price-box">
					<input  v-model="moneyStart" placeholder="设置最低价" />
					<view class="line"></view>
					<input  v-model="moneyEnd"  placeholder="设置最高价" />
				</view>
			</view>
			<view class="star">
				<text class="price-label">服务设施</text>
				<view class="price-list">
					<view class="price-item" :class="item.choose==true?'price-item-ac':''" v-for='(item,index) in foodTipData' :key='index' @click="item.choose=!item.choose">
					<text>{{item.tip}}</text>
					<image v-if="item.choose==true" src="/static/type-xz.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="reset" @click="reset">重置</view>
			<view class="commit" @click="commit">确定</view>
		</view>
	</view>
</template>

<script>
	import rangeSlider from '@/components/range-slider/range-slider'
	export default{
		data(){
			return{
				moneyStart:"",
				moneyEnd:"",
				priceIndex:null,
				foodTipIndex:[],
				sliderConfig:{
					values:[0,500],
					step:50,
					min:0,
					max:2000,
					width:700,
					height:100,
					liveMode:true
				},
				
				foodTipData:[
					{
						tip:'营业中',
						choose:false,
					},
					{
						tip:'新店',
						choose:false,
					},
					{
						tip:'24小时营业',
						choose:false,
					},
					{
						tip:'订座',
						choose:false,
					},
					{
						tip:'可停车',
						choose:false,
					},
					{
						tip:'外卖',
						choose:false,
					},
					{
						tip:'排队',
						choose:false,
					},
					{
						tip:'预点餐',
						choose:false,
					}
				]
			}
		},
		methods: {
			rangechange(event){
				this.moneyStart2 = event.minValue-1250
				this.moneyEnd2 = event.maxValue-1250
				this.moneyStart = this.moneyStart2
				this.moneyEnd = this.moneyEnd2
				this.priceIndex = null
			},
			choosePrice(obj,index){
				this.priceIndex = index
				this.moneyStart = obj.price1
				this.moneyEnd = obj.price2
			},
			chooseFT(obj,index){
				this.foodTipIndex.push(index)
			},
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeFT();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeFT();
				//#endif
			},
			commit(){
				this.close()
			},
			moveHandle(){
				
			}
			
		},
		created(){
			
		},
		components: {
			rangeSlider
		},
		
	}
</script>

<style scoped>
	.screen-body{
		width: 750upx;
		background: #FFFFFF;
		height: 585upx;
		position: absolute;
		padding-top: 50upx;
		z-index: 35;
	}
	.price{
		width: 750upx;
		height: auto;
		display: table;
	}
	.price-label{
		font-size: 32upx;
		margin-left: 30upx;
		line-height: 60upx;
		float: left;
	}
	.price-box{
		width: 600upx;
		height: 66upx;
		margin-left: 75upx;
		margin-top: 90upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.line{
		width: 50upx;
		height: 2upx;
		background: rgba(153,153,153,1.00);
		margin: 32upx 30upx 0 30upx;
	}
	.price-box input{
		width: 288upx;
		height: 66upx;
		background:rgba(246,246,246,1.00);
		line-height: 66upx;
		text-align: center;
		border-radius: 30upx;
		font-size: 30upx;
		padding: 0 20upx;
	}
	.money{
		font-size: 28upx;
		line-height: 60upx;
		margin-left: 20upx;
		color: #0075EE;
		float: left;
	}

	.price-slider{
		width: 700upx;
		margin-left: 25upx;
		margin-top: 60upx;
		height: 60upx;
	}
	
	.price-list{
		width: 700upx;
		margin-left: 25upx;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.price-item{
		background: #F3F6FB;
		padding: 4upx 20upx;
		margin-right: 10upx;
		font-size: 24upx;
		color: #666666;
		min-width: 120upx;
		height: 70upx;
		line-height: 70upx;
		border-radius: 10upx;
		text-align: center;
		margin-top: 20upx;
		position: relative;
	}
	.price-item image{
		width: 31upx;
		height: 24upx;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.price-item-ac{
		color: #5779FE;
		background: #D8E5FA;
		
	}
	.star{
		margin-top: 20upx;
		width: 750upx;
		height: auto;
	}
	.commit{
		width: 300upx;
		height: 80upx;
		border-radius: 40upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
		font-size: 28upx;
		float: right;
		right: 60upx;
		position: absolute;
		bottom: 40upx;
	}
	.reset{
		width: 300upx;
		height: 80upx;
		border-radius: 40upx;
		color: #999999;
		text-align: center;
		border: #999999 solid 1upx;
		line-height: 80upx;
		font-size: 28upx;
		left: 60upx;
		float: left;
		position: absolute;
		bottom: 40upx;
	}
</style>
